<template>
  <div class="demo-container">
    <h2>行拖拽功能</h2>
    <p>展示表格行拖拽排序功能</p>

    <div class="tips">
      <el-alert
        title="拖拽提示"
        type="info"
        description="点击并拖动行可以改变其顺序，拖拽过程中表格会自动滚动"
        :closable="false"
        show-icon
      />
    </div>

    <AdvancedTable
      :data="tableData"
      :columns="columns"
      :selection="false"
      :show-index="true"
      :row-draggable="true"
      :on-row-drop="handleRowDrop"
      height="500px"
    >
      <!-- 自定义工具栏 -->
      <template #toolbar>
        <div class="operations">
          <el-button type="primary" @click="resetData">重置顺序</el-button>
          <div class="drop-log">
            <strong>拖拽日志:</strong>
            <el-scrollbar height="100px">
              <div
                v-for="(log, index) in dropLogs"
                :key="index"
                class="log-item"
              >
                {{ log }}
              </div>
              <div v-if="dropLogs.length === 0" class="empty-log">
                暂无拖拽记录
              </div>
            </el-scrollbar>
          </div>
        </div>
      </template>
    </AdvancedTable>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { AdvancedTable } from '../components/Table'

// 原始数据备份
const originalData = [
  {
    id: 1,
    name: '项目A',
    priority: 1,
    status: '进行中',
    progress: 30,
    owner: '张三',
    deadline: '2023-10-15',
  },
  {
    id: 2,
    name: '项目B',
    priority: 2,
    status: '未开始',
    progress: 0,
    owner: '李四',
    deadline: '2023-11-20',
  },
  {
    id: 3,
    name: '项目C',
    priority: 3,
    status: '已完成',
    progress: 100,
    owner: '王五',
    deadline: '2023-09-30',
  },
  {
    id: 4,
    name: '项目D',
    priority: 4,
    status: '进行中',
    progress: 75,
    owner: '赵六',
    deadline: '2023-12-01',
  },
  {
    id: 5,
    name: '项目E',
    priority: 5,
    status: '已暂停',
    progress: 50,
    owner: '钱七',
    deadline: '2023-10-25',
  },
  {
    id: 6,
    name: '项目F',
    priority: 6,
    status: '未开始',
    progress: 0,
    owner: '孙八',
    deadline: '2024-01-10',
  },
  {
    id: 7,
    name: '项目G',
    priority: 7,
    status: '进行中',
    progress: 20,
    owner: '周九',
    deadline: '2023-11-05',
  },
  {
    id: 8,
    name: '项目H',
    priority: 8,
    status: '已完成',
    progress: 100,
    owner: '吴十',
    deadline: '2023-09-15',
  },
]

// 表格数据
const tableData = ref<any[]>([...originalData])

// 表格列定义
const columns = [
  {
    prop: 'name',
    label: '项目名称',
    width: 120,
  },
  {
    prop: 'priority',
    label: '优先级',
    width: 80,
  },
  {
    prop: 'status',
    label: '状态',
    width: 100,
  },
  {
    prop: 'progress',
    label: '进度(%)',
    width: 100,
  },
  {
    prop: 'owner',
    label: '负责人',
    width: 100,
  },
  {
    prop: 'deadline',
    label: '截止日期',
    width: 120,
  },
]

// 拖拽日志
const dropLogs = ref<string[]>([])

// 处理行拖拽
const handleRowDrop = (oldIndex: number, newIndex: number) => {
  // 记录拖拽日志
  const item = tableData.value[oldIndex]
  dropLogs.value.unshift(
    `${new Date().toLocaleTimeString()} - 将 "${item.name}" 从位置 ${
      oldIndex + 1
    } 移动到 ${newIndex + 1}`
  )

  // 将日志限制为最新的10条
  if (dropLogs.value.length > 10) {
    dropLogs.value = dropLogs.value.slice(0, 10)
  }

  // 更新数据顺序
  const item2 = tableData.value.splice(oldIndex, 1)[0]
  tableData.value.splice(newIndex, 0, item2)

  // 更新优先级
  tableData.value.forEach((item, index) => {
    item.priority = index + 1
  })

  ElMessage.success(`项目 "${item.name}" 的优先级已更新`)
}

// 重置数据
const resetData = () => {
  tableData.value = [...originalData]
  dropLogs.value = []
  ElMessage.info('已重置项目顺序')
}
</script>

<style scoped>
.demo-container {
  padding: 20px;
}

h2 {
  margin-top: 0;
}

.tips {
  margin: 15px 0;
}

.operations {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 15px;
}

.drop-log {
  flex: 1;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 10px;
  max-width: 400px;
}

.log-item {
  padding: 5px 0;
  border-bottom: 1px dashed #ebeef5;
  font-size: 12px;
}

.empty-log {
  color: #909399;
  font-size: 12px;
  padding: 10px 0;
  text-align: center;
}
</style>
